<template>
	<view class="indexContainer">
		<!-- 头部 -->
     <view class="header">
			 <image src="../../static/images/logo.png"></image>
			<view class="searchInput">
				 <i class="iconfont icon-sousuo"></i>
				 <input type="text" placeholder="搜索商品" placeholder-class="placeholder"/>
			</view>
			 	 <!-- 按钮 -->
			  <button>登录</button>
		 </view>
		 <!-- 导航菜单 -->
		<scroll-view scroll-x="true" enable-flex class="navScroll"> 
			<view class="navItem " :class="{active:navId===-1}" @click="navId=-1">推荐</view>
			<view class="navItem" :class="{active:navId===item.L1Id}" v-for="(item,index) in kingKongList" :key="item.L1Id" @click="changeNav(item.L1Id)">
			{{item.text}}</view>			
		 </scroll-view>
		 <!-- 滑块 -->
		 <scroll-view class="recommendScroll">
			 <!-- 推荐菜单的界面 -->
			 <recommend v-if="navId===-1"/>
			 <!-- 居家生活和服饰鞋包菜单对应的界面 -->
			 <cartList :navIndex = "navId" v-if="navId!==-1"/>
		 </scroll-view>
	</view>
</template>

<script>
	// //引入
	// import request from'../../utils/request.js'
	// 引入recommend组件
	import recommend from '../../components/recommend/recommend.vue'
	//引入cartList组件
	import cartList from '../../components/cateList/cateList.vue'	
	//辅助函数
	import {mapState, mapActions,mapGetters} from 'vuex';
	export default {
		data(){
			return{
				// indexData:{},//首页的初始数据
				navId:-1//菜单的id标识
			}
		},
		// 注册组件
		components:{
			recommend,
			cartList
		},
		//生命周期
		mounted() {
			//获取首页中的初始数据
			this.getIndexData();
		},
		//计算属性
		computed:{
			...mapState({
				initData:state=> state.indexData.initData
			}),
			...mapGetters(['kingKongList'])
		},
		methods:{
			//分发action,获取首页的数据
			...mapActions(['getIndexData']),
				//修改菜单的高亮显示
				changeNav(navId){
					this.navId = navId;
				}
		}
		// methods:{
		// 	//获取首页到的初始数据
		// 	async getIndexData(){
		// 		const result = await request('/getInitData')
		// 		//保存数据
		// 		this.indexData = result.indexData
		// 	},
		// 	//修改菜单的高亮显示
		// 	changeNav(navId){
		// 		this.navId = navId
		// 	}
		// }
	}
</script>

<style lang="stylus">
.indexContainer
	.header
			display flex
			padding 10upx 0 
			image
				width 140upx
				height 40upx
				margin 10upx 20upx
			.searchInput
				height 60upx
				background-color #eee
				position relative
				input
					margin-left 50upx
					height 60upx
				.iconfont
					font-size 30upx
					position absolute
					left 10upx
					top 25%
				.placeholder
					font-size 28upx
					text-align center
			button
				width 144upx
				height 60upx
				font-size 24upx
				color #b4282d
				line-height 60upx
				text-align center
				margin 0 20upx				
	.navScroll
		display flex
		white-space nowrap
		height 80upx
		.navItem
			width 200upx
			height 100%
			line-height 80upx
			margin 0 20upx
			padding 0 20upx
			text-align center
			display inline-block
			font-size 28upx
			box-sizing border-box
			&.active
				border-bottom 1upx solid red
	.recommendScroll
		margin-top 20upx
	
	
	test
			color red		
</style>